<template>
  <div>
    <!--logo-->
    <img class="img" src="../assets/logo.png">
    <div class="lunbo">
      <el-carousel indicator-position="outside" height="500px" ref="carousel">
        <el-carousel-item v-for="(item,index) in carouselList" :key="index">
          <img :src="item.pictureUrl" @click="toCarouselList(item.id)"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="login-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
      <el-form>
        <div class="tou">
          <h2>邮箱注册</h2>
        </div>
        <el-form-item label="邮箱:">
          <el-input v-model="email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码" id="pwd">
          <el-input v-model="password" type="password" @blur="Pwd()" placeholder="请输入密码" show-password/>
        </el-form-item>
        <el-form-item label="确认密码:">
          <el-input v-model="rePassword" type="rePassword" @blur="RePwd()" placeholder="请输入确认密码" show-password/>
        </el-form-item>
        <!--      <el-form-item label="邮箱验证码:">-->
        <!--        <el-input v-model="checkCode" placeholder="请输入验证码"></el-input>-->
        <!--      </el-form-item>-->
        <!--    <el-form-item label="邮箱验证码:">-->
        <!--      <el-input v-model="registerData.inputCheckCode" placeholder="验证码">-->
        <!--        <template #append>-->
        <!--          <el-button @click="sendEmail()" plain :loading="btnLoading" count=60 class="fasong">-->
        <!--            {{interCount}}-->
        <!--          </el-button>-->
        <!--        </template>-->
        <!--      </el-input>-->
        <!--    </el-form-item>-->

        <el-form-item label="邮箱验证码:">
          <el-input v-model="inputCheckCode" @blur="CheckCode()" placeholder="验证码">
            <template #append>
              <el-button @click="SendEmail()" plain :loading="btnLoading" count=60 class="fasong">
                {{ interCount }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="邀请码（可选填）:">
          <el-input v-model="inputInvitationCode" placeholder="请输入邀请码"></el-input>
        </el-form-item>
        <div class="an">
          <el-row class="mb-4">
            <el-button type="primary" @click="Register()"><h4>注 册</h4></el-button>
          </el-row>
        </div>
        <el-switch v-model="value1" active-text="同意所有条款"/>
      </el-form>
    </div>
  </div>
</template>
<script scoped>
// import qs from "qs";

export default {
  name: "Register",
  data() {
    return {
      carouselList: [],
      name: '',
      email: '',
      account: '',
      password: '',
      rePassword: '',
      inputCheckCode: '',
      inputInvitationCode: '',
      interCount: '发送',
      count: 0,
      btnLoading:false,
      value1: '请同意所有条款'
    }
  },

  mounted() {
    this.Lunbo();
  },

  methods: {
    Lunbo() {
      this.$axios.get('/picture/guanggao')
          .then(data => {
            //alert(data.code);
            if (data.code === 0) {
              this.carouselList = data.result.picture;
              //alert(this.carouselList);
              if (this.carouselList == null || this.carouselList == '') {
                this.$message({
                  message: '抱歉,轮播图出了点问题,工作人员正在解决',
                  type: 'error'
                })
                return;
              }
              this.$refs.carousel.next();
            }
          }).catch(error => {
        console.log(error);
      })
    },

    Pwd() {
      if (this.password == '') {
        this.$message({
          message: '密码不能为空',
          type: 'error'
        })
        return;
      }
      let regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
      if (!regPassword.test(this.password)) {
        this.$message({
          message: '请输入长度8-16位,包含字母数字并且前后不能有空格',
          type: 'error'
        })
        return;
      }
    },
    RePwd() {
      if (this.rePassword == '') {
        this.$message({
          message: '请输入确认密码',
          type: 'error'
        })
        return;
      }
      if (this.rePassword != this.password) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'error'
        })
        return;
      }
    },
    CheckCode() {
      if (this.inputCheckCode == '') {
        this.$message({
          message: '验证码不能为空',
          type: 'error'
        })
        return;
      }
    },


    //先进行邮箱查重,然后再向指定邮箱发送注册的验证码
    SendEmail() {
      if (!this.email) {
        //已经全局加载了element-plus
        this.$message({
          message: "请输入邮箱",
          type: 'error'
        })
        return;
      }

      var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!regEmail.test(this.email)) {
        this.$message({
          message: '邮箱格式不正确',
          type: 'error'
        })
        return;
      }

      // console.log("this.email=" + this.email);
      this.$axios.get('/user/regemail', {
        params: {
          email: this.email
        }
      }).then(data => {
        console.log("该邮箱在数据库中有:" + data.code + "个");
        if (data.code != 0) {
          this.$message({
            message: "该邮箱已注册",
            type: 'error'
          })
          return;
        }

        if (this.value1 == false) {
          this.$message({
            message: '请同意所有条款',
            type: 'error'
          })
          return;
        }

        console.log("this.email=" + this.email);
        this.btnLoading = true;
        this.count = 60;
        this.interCount = this.count;
        this.$axios.get('/mail/send', {
          params: {
            email: this.email
          }
        }).then(data => {
          console.log("code=" + data.code);
          if(data.code === 0){
            this.$message({
              message: '验证码发送成功',
              type: 'success'
            })
            this.interCount = 59;
            setInterval(() => {
              if (this.interCount <= 0) {
                this.btnLoading = false;
                this.interCount = "重新发送";
                this.interval.clear();
              }
              if (this.interCount > 0) {
                this.interCount--;
              }
            }, 1000)
          }
          return;
        }).catch(error => {
          console.log(error);
        })

      })
    },


    //用户通过收到的验证码进行注册,其中邀请码是选填的
    Register() {
      if (this.password == '') {
        this.$message({
          message: '密码不能为空',
          type: 'error'
        })
        return;
      }
      let regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
      if (!regPassword.test(this.password)) {
        this.$message({
          message: '请输入长度8-16位,包含字母数字并且前后不能有空格',
          type: 'error'
        })
        return;
      }

      if (this.rePassword == '') {
        this.$message({
          message: '请输入确认密码',
          type: 'error'
        })
        return;
      }
      if (this.rePassword != this.password) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'error'
        })
        return;
      }

      if (this.inputCheckCode == '') {
        this.$message({
          message: '验证码不能为空',
          type: 'error'
        })
        return;
      }


      // let data = qs.stringify({
      //   name: this.email, account: this.email, password: this.password,
      //   email: this.email, checkCode: this.inputCheckCode
      // });
      //alert(data);
      console.log("this.inputCheckCode=" + this.inputCheckCode)

      this.$axios.get('/user/register', {
        params: {
          name: this.email,
          account: this.email,
          password: this.password,
          email: this.email,
          checkCode: this.inputCheckCode,
          superiorInvitation: this.inputInvitationCode
        }
      })
          .then(data => {
            let check = data.result.check;
            let superior = data.result.superior;
            // alert(check);
            // alert(superior);
            // alert(data.code);
            if (check === 1) {
              this.$message({
                message: '请确认验证码是否输入正确',
                type: 'error'
              })
              return;
            }else if(superior === 1){
              this.$message({
                message: '请确认邀请码是否输入正确',
                type: 'error'
              })
              return;
            } else if(data.code === 1){
              this.$message({
                message: '糟了,出错了',
                type: 'error'
              })
              return;
            }
            this.$message({
              message: '恭喜你,注册成功!',
              type: 'success'
            })
            this.$router.push({path: '/login'})
          }).catch(error => {
        console.log(error);
      })
    },
  }
}
</script>

<style scoped>
.img {
  width: 150px;
  height: 120px;
  border: 1px solid black;
  margin-right: 1450px;
  border-radius: 5px;
}

.lunbo {
  width: 50rem;
  margin-top: 2rem;
  float: left;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  margin-top: 30px;
  margin-right: 80px;
  border: gray solid 1px;
  border-radius: 5px;
  float: right;
}

.tou {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.an {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

</style>